<template>
	<div class="for_details">
		<div class="for_details_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">待收货<i class="el-icon-close"></i></div>
		</div>
		<div class="for_details_title">
			<div class="for_details_title_left">待收货/<i>订单详情</i></div>
			<div class="for_details_title_right">
				<button class="for_details_title_right_btn" @click="handerBase">返回</button>
			</div>
		</div>
		<div class="for_details_content">
			<!-- 进度条 -->
			<div class="for_details_content_top">
				<div class="process">
					<div class="progress"><div class="progress_box"></div></div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">1</div></div>
						<div class="process_num_title">
							买家下单
							<div v-if="orderInfoData.create_time" class="process_num_title_text">{{orderInfoData.create_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.create_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">2</div></div>
						<div class="process_num_title">
							买家付款
							<div v-if="orderInfoData.pay_time" class="process_num_title_text">{{orderInfoData.pay_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.pay_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">3</div></div>
						<div class="process_num_title">
							商家发货
							<div v-if="orderInfoData.send_time" class="process_num_title_text">{{orderInfoData.send_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.send_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round round_active">4</div></div>
						<div class="process_num_title">
							订单完成
							<div v-if="orderInfoData.finish_time" class="process_num_title_text">{{orderInfoData.finish_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.finish_time | dateformat('HH:mm:ss')}}</div></div>
						</div>
					</div>
				</div>
			</div>
			<div class="for_details_content_center">
				<div class="for_details_content_center_left">
					<div class="top">
						<div class="for_details_content_center_left_box">
							<div class="left">订单编号：</div>
							<div class="right">{{orderInfoData.order_code}}</div>
						</div>
						<div class="for_details_content_center_left_box">
							<div class="left">付款方式：</div>
							<div class="right">{{orderInfoData.pay_type=='1'?'微信支付':orderInfoData.pay_type=='2'?'线下支付':''}}</div>
						</div>
						<div class="for_details_content_center_left_box">
							<div class="left">买家：</div>
							<div class="right right_active">{{orderInfoData.name}}</div>
						</div>
						<div class="for_details_content_center_left_box">
							<div class="left">配送方式：</div>
							<div class="right">{{orderInfoData.move_way=='1'?'快递':orderInfoData.move_way=='2'?'自提':''}}</div>
						</div>
						<div class="for_details_content_center_left_box">
							<div class="left">收货人：</div>
							<div class="right" id="content">{{orderInfoData.province}} {{orderInfoData.city}} {{orderInfoData.area}} {{orderInfoData.address}} {{orderInfoData.name}} {{orderInfoData.mobile}}</div>
							<font class="copyConsignee" data-clipboard-target="#content" @click="copyConsignee">复制</font>
						</div>
					</div>
					<div class="botton">
						<!-- <div class="botton_btn">修改订单收货信息</div> -->
					</div>
				</div>
				<div class="for_details_content_center_right">
					<div class="for_details_content_center_right_top">
						订单状态：<font>待收货</font><i>（商家已发货，等待买家收货并交易完成）</i>
					</div>
					<div class="expressBox">
						<div class="for_details_content_center_right_logistics" v-for="(item,index) in orderInfoData.send_data" :key="index">
							<div class="packageBox">{{item.send_name}}</div>
							<div class="for_details_content_center_right_logistics_top">
								快递公司：<i>{{item.express_name}}</i>
							</div>
							<div class="for_details_content_center_right_logistics_center">
								快递单号：<i>{{item.courier_num}}</i>
							</div>
							<div class="for_details_content_center_right_logistics_bottom">
								发货时间：<i>{{$moment(item.send_time*1000).format('yyyy-MM-DD hh:mm:ss')}}</i>
							</div>
						</div>
					</div>
					<!-- <div class="for_details_content_center_right_center">
						<button class="delivery">确认发货</button>
						<div class="delivery_text">
							<i>修改物流</i><i>取消发货</i><i>修改佣金</i><i>添加备注</i>
						</div>
					</div> -->
					<!-- <div class="for_details_content_center_right_botton">
						友情提示：请及时关注物流状态，确保买家及时收到商品，如果买家未及时收到货物或有退换货请求，请及时联系买家妥善处理;
					</div> -->
				</div>
				<!-- <div class="for_details_content_center_text">
					一级分销商
					<div class="for_details_content_center_text_title">
						<div class="for_details_content_center_text_title_box">
							<div class="for_details_content_center_text_title_box_left">姓名：</div>
							<div class="for_details_content_center_text_title_box_right text_active">未填写<i>?</i></div>
						</div>
						<div class="for_details_content_center_text_title_box">
							<div class="for_details_content_center_text_title_box_left">手机号：</div>
							<div class="for_details_content_center_text_title_box_right"></div>
						</div>
						<div class="for_details_content_center_text_title_box">
							<div class="for_details_content_center_text_title_box_left">佣金：</div>
							<div class="for_details_content_center_text_title_box_right">2</div>
						</div>
					</div>
				</div> -->
			</div>
			<h3 class="table_text">商品信息</h3>
			<div class="for_details_content_bottom">
				<table>
					<tr>
						<th style="width: 20%;">商品标题</th>
						<th style="width: 19%;">规格、编号、条码</th>
						<th style="width: 11%;">单价</th>
						<th style="width: 11%;">数量</th>
						<th style="width: 13%;">原价</th>
						<th style="width: 13%;">折扣后</th>
						<th style="width: 13%;">状态</th>
					</tr>
					<tr v-for="(v,i) in orderInfoData.product_lst" :key="i">
						<td style="width: 20%;">
							<div class="tab_img">
								<img class="tab_img" style="border:0;" :src="v.main_imgurl" alt="">
							</div>
							<div class="tab_right">
								<div class="tab_right_title">{{v.product_title}}</div>
								<!-- <div class="tab_right_invoice">支持开票</div> -->
							</div>
						</td>
						<td class="td_active" style="width: 19%;">
							<div class="tab_box">
								<div class="tab_box_content">
									规格：
									<template v-if="v.attr_params && v.attr_params.length">
										 <p class="tab_spec" v-for="(item,index) in v.attr_params" :key="index">
											<i>{{item.value}}</i>
										</p>
									 </template>
									 <template v-else>无</template>
								</div>
								<div class="tab_box_content">编码：{{v.specss?v.specss:' 无'}}</div>
								<div class="tab_box_content">条码：{{v.specsss?v.specsss:' 无'}}</div>
							</div>
						</td>
						<td style="width: 11%;">￥{{v.price}}</td>
						<td style="width: 11%;">{{v.num}}个</td>
						<td style="width: 13%;">￥{{v.primary_price}}</td>
						<td style="width: 13%;">￥{{v.price}}</td>
						<td style="width: 13%;">{{v.order_status=='1'?'待付款':v.order_status=='2'?'待发货':v.order_status=='3'?'待收货':v.order_status=='4'?'已完成':'已关闭'}}</td>`
					</tr>
				</table>
				<div class="price">
					<div class="price_box">
						<div class="price_box_left">商品小计：</div>
						<div class="price_box_right">￥{{orderInfoData.price}}</div>
					</div>
					<div class="price_box">
						<span class="price_box_left">运费：</span>
						<span class="price_box_right">￥{{orderInfoData.move_price}}</span>
					</div>
					<div class="price_box">
						<div class="box-left">
							<span class="price_box_left price_active">总价：</span>
							<span class="price_box_right price_active">￥{{orderInfoData.price}}</span>
						</div>
						<div class="box-center">
							<span class="price_box_left price_active">已付定金：</span>
							<span class="price_box_right price_active">￥{{orderInfoData.deposit_price}}</span>
						</div>
						<div class="box-right" v-if="orderInfoData.is_many_way==1">
							<span class="price_box_left price_active">待付尾款：</span>
							<span class="price_box_right price_active">￥{{orderInfoData.balance_price}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import ClipboardJS from "clipboard";

export default {
  data() {
    return {
      total: 0.0, // 实付款
      freight: 0.0, // 运费
      subtotal: 0.0, // 小计
      changePrice: 0.0, // 卖家改价
      completedList: [],
      orderInfoData: []
    };
  },
  mounted() {
    this._getOrderInfo();
  },
  methods: {
    handerBase() {
      this.$router.go(-1);
    },
    // 实现复制功能
    copyConsignee() {
      // 括号中的内容：对应复制按钮的class
      let clipboard = new ClipboardJS(".copyConsignee");
      clipboard.on("success", function(e) {
        console.log("复制成功");
        e.clearSelection();
      });
      clipboard.on("error", function(e) {
        console.log("复制失败，请重试");
        console.log(e);
      });
    },

    //获取传过来的order_id，获取商品详情
    _getOrderInfo() {
      console.log(this.$route);
      let order_id = this.$route.query.order_id;
    //   let store_id = localStorage.getItem("sid");
      this.$http
        .post("/api/root/PackOrder/detail", { order_id })
        .then(res => {
          console.log(res);
          if (res.code == 1) {
            this.orderInfoData = res.data ? res.data : [];
          }else{
				this.$message.warning(res.msg)
			}
        });
    }
  }
  // computed: {
  // 	// 商品小计
  // 	subtotalPrice() {
  // 		this.completedList.filter(v => {
  // 			this.subtotal += v.price;
  // 		});
  // 		return `${this.subtotal}.00`;
  // 	},
  // 	// 运费
  // 	freightPrice() {
  // 		this.completedList.filter(v => {
  // 			this.freight += v.freight;
  // 		})
  // 		return `${this.freight}.00`
  // 	},
  // 	// 卖家改价
  // 	changePrices() {
  // 		for(let i=0;i<this.completedList.length;i++) {
  // 			this.changePrice += this.completedList[i].prices - this.completedList[i].pricess;
  // 		}
  // 		return `${this.changePrice}.00`;
  // 	},

  // 	// 实付款
  // 	totalPrice() {
  // 		this.completedList.filter(v => {
  // 			this.total += v.pricess;
  // 		});
  // 		return `${this.total}.00`;
  // 	},
  // },
};
</script>

<style lang="less" scoped="scoped">
@import "details.less";
</style>
